import  { Component } from 'react'
import { Button } from "antd";
// import _ from 'lodash';
export default class AboutFor extends Component {
    constructor(props) {
        super(props);
        const { formData = [] } = props;
        // tempArray根据util的固定数组判断是否设置对应只读属性
        let dataTypeList = [];
        formData.forEach((item, index) => {
            dataTypeList.push('------------------'+item.type+'变了')
        });
        this.state = {
          formData,
          dataTypeList,
        };
    }
    handleAddItem() {
        const { formData ,dataTypeList=[]} = this.state;
        let newFormData = this.abb(formData);
        let newItem = {name:'增加的一号'};
        newFormData.splice(-2,0,newItem);
        const dataTypeListMultified = [].concat(dataTypeList);
        dataTypeListMultified.splice(-2, 0, "------");
        this.setState({
            formData: newFormData,
            dataTypeList:dataTypeListMultified
        });
    }
    abb (obj) {
        let tmp = JSON.stringify(obj); 
        let result = JSON.parse(tmp); 
        return result;
    }
    handleRemoveItem(index) {
        const { formData,dataTypeList} = this.state;
        let newFormData = this.abb(formData);
        newFormData = formData.filter((param, idx) => idx !== index);
        const dataTypeListMultified = [].concat(dataTypeList);
        dataTypeListMultified.splice(index, 1);
        this.setState({
            
          formData: newFormData,
          dataTypeList: dataTypeListMultified
        });
    }
    render() {
        const { formData = [] ,dataTypeList =[]} = this.state;
        return (
            <div>
                <Button type="default"  onClick={() => {
                        this.handleAddItem();
                      }}>+</Button>
                
                {formData.map((el,pairIndex)=>{
                    return (
                    <div key={pairIndex}>
                       {el.name}
                        {dataTypeList[pairIndex]}<Button type="default"  onClick={() => {this.handleRemoveItem(pairIndex);}}>x</Button>
                    </div>)
                })}
            </div>
        )
    }
}
